<template>

  <div class="chart-wrapper">
    <div class="t_s">

      <div class="sologan v_center">
        <svg-icon class-name="small_icon v_center" icon-class="static" /> 销售报表 <span
          style="color: rgba(153, 153, 153, 1);font-size:10px;margin-left:6px;margin-top: 4px">(万元)</span> </div>

      <div class="role_name c_flex">{{$store.getters.userInfo.department_name}}</div>
    </div>
    <canvas width="300" height="150" id="mountNode2"></canvas>
    <div class="date_table">
      <div v-for="(item,index) in data2" :key="index" class="a">
        <div class="num ">
          <svg-icon class-name="small_icon v_center" :icon-class="'season' + (index+1)" />{{item.name}}</div>
        <div class="month c_flex">{{item.num}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import F2 from "@antv/f2";
  import {
    HomeService
  } from "../../../api";
  export default {
    name: 'sale_report',
    data() {
      return {
        data2: [{
          name: '第一季度',
          percent: 0.41,
          a: '1',
          num: 10563,
        }, {
          name: '第二季度',
          percent: 0.25,
          a: '1',
          num: 6548,
        }, {
          name: '第三季度',
          percent: 0.25,
          a: '1',
          num: 5760,
        }, {
          name: '第四季度',
          percent: 0.09,
          a: '1',
          num: 330,
        }],

      }
    },
    created() {
      this.handleData();
    },
    methods: {
      
      handleData() {
          HomeService.getSale().then((res) => {
            console.log('sale', res.data)
            this.data2 = res.data;
            setTimeout(() =>{

              this.init();
            },500)
          })
      },
      init() {
        let _this = this;
        var chart = new F2.Chart({
          id: 'mountNode2',
          pixelRatio: window.devicePixelRatio
        });
        chart.source(_this.data2, {
          percent: {
            formatter: function formatter(val) {
              return val * 100 + '%';
            }
          }
        });
        chart.legend({
          position: 'right',
          itemFormatter: function itemFormatter(val) {
            console.log('看看是啥？', _this.data2)
            return val + '  ' + _this.data2.find(item => item.name == val).percent * 100 + '%';
          }
        });
        chart.tooltip(true);
        chart.coord('polar', {
          transposed: true,
          radius: 0.85
        });
        chart.axis(false);
        chart.interval().position('a*percent').color('name', ['rgba(236, 108, 0, 1)', 'rgba(102, 71, 142, 1)',
          'rgba(204, 47, 115, 1)', '#FACC14', '#F04864',
          '#8543E0'
        ]).adjust('stack').style({
          lineWidth: 1,
          stroke: '#fff',
          lineJoin: 'round',
          lineCap: 'round'
        }).animate({
          appear: {
            duration: 1200,
            easing: 'bounceOut'
          }
        });

        chart.render();
      }
    },
  }
</script>

<style lang="less" scoped>
  .chart-wrapper {
    width: 701.99px;
    height: 750px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;


    .t_s {
      width: 100%;
      padding: 32px 24px;
      display: flex;

      .sologan {


        flex: 1;
        color: rgba(51, 51, 51, 1);
        font-size: 24px;
        line-height: 1;

      }

      .role_name {
        width: 160px;
        height: 60px;
        background-color: rgba(243, 245, 247, 1);
        border-radius: 16px;
        color: rgba(102, 102, 102, 1);
        font-size: 20px;
      }
    }

    .date_table {
      width: 654px;
      height: 284px;
      background-color: #ffffff;
      border-radius: 16px;
      margin-left: 24px;
      padding: 24px;
      display: grid;
      grid-row-gap: 25px;
      grid-column-gap: 68px;
      grid-template-columns: 280px 280px;
      grid-template-rows: 114px 114px;
      grid-template-areas: 'a a'
        'a a';

      .a {

        background-color: #ffffff;
        border-radius: 16px;
        display: flex;
        flex-direction: column;

        .num {
          flex: 5;
          color: rgba(51, 51, 51, 1);
          font-size: 24px;

          .small_icon {
            display: inline-block;
          }
        }

        .month {
          flex: 5;
          border-radius: 16px;
          background-color: rgba(243, 245, 247, 1);
          font-size: 22px;
          color: rgba(51, 51, 51, 1);
          font-size: 28px;
        }
      }
    }
  }
</style>